﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SOFIA</title>

    <!-- Libraries -->
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="Graphics/PhiloGL.js" type="text/javascript"></script>

    <!-- Stylesheets -->
    <link rel = "Stylesheet" type = "text/css" href = "styles.css" />

    <!-- Scripts -->
    <script src="Tabs.js" type="text/javascript"></script>

    <script src="File/Trajectory.js" type="text/javascript"></script>
    <script src="File/PDB.js" type="text/javascript"></script>
    <script src="File/SF.js" type="text/javascript"></script>
    <script src="File/PDBReader.js" type="text/javascript"></script>
    <script src="File/SFReader.js" type="text/javascript"></script>

    <script src="Graphics/WebGL.js" type="text/javascript"></script>
    <script src="Graphics/Display.js" type="text/javascript"></script>

    <script src="Plots/Graph.js" type="text/javascript"></script>
    <script src="Plots/flot/jquery.flot.js" type="text/javascript"></script>

    <script src="Simulation/Run.js" type="text/javascript"></script>
    <script src="Simulation/EulerIntegrate.js" type="text/javascript"></script>
    <script src="Simulation/LJForcefield.js" type="text/javascript"></script>
    <script src="Simulation/bondForces.js" type="text/javascript"></script>

</head>
<body>

    <!-- Header Div Start -->
    <div id = "header">
        <input type = "button" id = "fileTabButton" value = "File" />
        <input type = "button" id = "runTabButton" value = "Run" />
        <input type = "button" id = "visualizeTabButton" value = "Visualize" />
        <input type = "button" id = "plotTabButton" value = "Plot" />
    </div>
    <!-- Header Div End -->

    <!-- Graphics Div Start -->
    <div id = "graphics">
        <canvas id="graphicsCanvas" width="800" height="800"></canvas>
    </div>
    <!-- Graphics Div End -->

    <!-- Sidebar Div Start -->
    <div id = "sidebar">

        <!-- File Tab Div Start -->
        <div id = "fileTab">
            <input type = "button" id = "newTrajectory" value = "New" /> <br />

            <input type = "file" id = "PDBBrowse" /> <br />

            <input type = "file" id = "SFBrowse" /> <br />

            <input type = "button" id = "display" value = "Display" /> <br />



            Current Frame: <span id = "curFrame">N/A</span>

            <br />

            <input type = "button" id = "sequence" value = "Display Sequence" />

            <br />
            <br />
            <br />
            <br />

            <input type = "button" id = "plot" value = "Plot" />
        </div>
        <!-- File Tab Div End -->

        <!-- Run Tab Div Start -->
        <div id = "runTab">
            <input type = "button" id = "Euler" value = "Euler's method" /> <br />

            Run for <input type = "text" id = "EulerRun" name = "Euler Run" size = "15" /> steps

            <br/ >

            <input type= "text" id = "timsetep" name = "Timestep" size = "15">
            Timestep (ps)

            <br />

            <input type= "text" id = "archiveInterval" name = "Archive Interval" size = "15">
            Archive Interval         

            <br />
        </div>
        <!-- Run Tab Div End -->

        <!-- Visualize Tab Div Start -->
        <div id = "visualizeTab">
            pretty stuff

            <br />

            <input type = "button" value = "VDW"/> <br />
            <input type = "button" value = "CPK"/> <br />
            <input type = "button" value = "Licorice"/> <br />

        </div>
        <!-- Visualize Tab Div End -->

        <!-- Plot Tab Div Start -->
        <div id = "plotTab">
            plots go here

            <br />

            <input type = "button" value = "Plot" /> <br />

            Export plots

            <br />

            <input type = "button" value = "Export" /> <br />
        </div>
        <!-- Plot Tab Div End -->

    </div>
    <!-- Sidebar Div End -->

    <!-- Plots Div Start -->
    <div id = "plots">
        	        This is a Graph

        <div id = "mainGraph"></div>
    </div>
    <!-- Plots Div End -->

</body>
</html>
